'use client'

import { AnimatePresence, motion } from 'motion/react'
import { useState } from 'react'

export function MotionPresence(){
    const [isVisible,setVisible] = useState(true);
    return (
        <div className={'h-screen bg-black p-32'}>
            <div className={'w-72 h-100 flex flex-col justify-between'}>
                <button className={'px-8 py-3 bg-sky-600 text-white font-mono'}
                        onClick={()=>setVisible(!isVisible)}>
                    show / hidden
                </button>
                <AnimatePresence>
                    {
                        isVisible && (
                            <motion.div className={'w-full h-85 bg-rose-500'}
                                        initial={{opacity:0,scaleY:0}}
                                        animate={{opacity:1,scaleY:1}}
                                        exit={{opacity:0,scaleY:0}}
                            >
                                <div className={'size-full flex justify-center items-center'}>
                                <span className={'font-mono text-white text-2xl'}>
                                    motion text
                                </span>
                                </div>
                            </motion.div>
                        )
                    }
                </AnimatePresence>
            </div>
        </div>
    )
}
